.vui-select{
    display: inline-block;
    min-width: 1.2rem;
    max-width: 4rem;
    vertical-align: middle;
    font-size: 0;
    line-height: 0;
    color: #333;
    position: relative;
    cursor: default;
    &:hover{
        border-color: #3399ff;
    }
    .vui-select-button{
        display: block;
        width: 100%;
        text-align: left;
        border:.01rem solid #ddd;
        border-radius: .02rem;
        &>span{
            display: inline-block;
            line-height: .3rem;
            font-size: .14rem;
            vertical-align: middle;
        }
        .vui-select-placeholder{
            width: calc(100% - .3rem);
            color: #666;
            padding: 0 .12rem;
        }
        .vui-select-text{
            width: calc(100% - .3rem);
            color: #333;
            padding: 0 .12rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .vui-select-icon{
            width: .3rem;
            height: .3rem;
            svg{
                fill: #444;
            }
        }
    }
    .vui-select-panel{
        width: 100%;
        overflow: hidden;
        background: #fff;
        border-top: 1px solid #ddd;
        position: fixed;
        border: .01rem solid #ddd;
        border-radius: 0 0 .02rem .02rem;
        top: .3rem;
        left: 0;
        margin-top:-.01rem; 
        z-index: 999;
        ul{
            width: 100%;
            overflow: hidden;
            li{
                width: 100%;
                font-size: .14rem;
                line-height: .28rem;
                padding: 0 .12rem;
                white-space: nowrap;
                &:hover,&:active{
                    background: #eaeaea !important;
                }
                &.vui-select-option-selected{
                    background: #dedede;
                }
            }
        }
    }
}